<template>
  <div id="user_center">
    <div class="user_herder">
        <el-page-header @back="$router.push('/')" content="个人中心" title="首页">
        </el-page-header>
    </div>
    <!-- 主体内容 -->
    <div class="user_main wrapper">
      <div class="mian_header">
        <!-- 头像 -->
        <UpdateAvatar></UpdateAvatar>
          <div class="header_name">
            <h2>{{ baseInfo.nickname? baseInfo.nickname: nickname  }}</h2>
            <p>{{ baseInfo.introduce ? baseInfo.introduce : introduce }}</p>
          </div>
      </div>
      <!-- -------------- -->
      <div class="mian_content">
        <el-row>
            <el-col :span="4">
              <el-menu
              :default-active="activeIndex2"
              class="el-menu-demo"
              router
              mode="vertical"
              background-color="#fff"
              text-color="#000"
              active-text-color="#409EFF">
                <el-menu-item index="/user/info">
                  <span class="iconfont">&#xe621;</span>
                  <span> 基本资料 </span>
                  <span class="el-icon-arrow-right"></span>
                </el-menu-item>
                <el-menu-item index="/user/order" >
                  <span class="iconfont">&#xe600;</span>
                  <span> 订单管理 </span>
                  <span class="el-icon-arrow-right"></span>
                </el-menu-item>
                <el-menu-item index="/user/address">
                  <span class="iconfont">&#xe634;</span>
                  <span> 我的地址 </span>
                  <span class="el-icon-arrow-right"></span>
                </el-menu-item>
                <el-menu-item index="/user/changepassword">
                  <span class="iconfont">&#xe606;</span>
                  <span> 修改密码 </span>
                  <span class="el-icon-arrow-right"></span>
                </el-menu-item>
              </el-menu>
            </el-col>
            <!-- --------------------- -->
            <el-col :span="20">
              <!-- 路由出口 -->
              <div class="router_view">
                <router-view></router-view>
              </div>
            </el-col>
          </el-row>
      </div>
    </div>
    <!-- 底部 -->
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyFooter from '@/components/userComponents/MyFooter.vue'
import UpdateAvatar from '@/components/userComponents/UpdateAvatar.vue'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      activeIndex2: '1',
      avatarUrl: '',
      uploadUrl: '',
      nickname: '高坚果遇上小土豆',
      introduce: '这个人很懒，没留下什么！'
    }
  },
  created () {

  },
  methods: {

  },
  computed: {
    ...mapState('userStore', ['baseInfo'])
  },
  components: { MyFooter, UpdateAvatar }
}
</script>

<style lang="less" scoped>
.user_main{
  .mian_header{
    padding: 8px;
    margin-bottom: 15px;
    height: auto;
    display: flex;
    // justify-content: center;
    align-items:center;
    background-color: #fff;
    .header_avatar{
      width: 20%;
      height: 100%;
      text-align: center;
      .upload{
        margin: 10px 0;
      }
    }
    .header_name{
      transform: translate(0,-20px);
    }
  }
  .mian_content{
    min-height: 500px;
    .el-menu{
      text-align: center;
      min-height: 500px;
    }
    .router_view{
      margin-left: 15px;
      padding: 15px;
      min-height: 500px;
      background-color: #fff;
    }
  }
}
</style>
